<!DOCTYPE>
<html>
    <head>
        <title>类选择器</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            .test {
                color:red;
                border:1px blue solid;
            }
        </style>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
    <div class='title'>类选择器</div>
    使用标签选择器可以为整个HTML文档中的同一个标签指定相同的CSS样式。<br/>
    但是在实际运用中，HTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。
    <div class='title'>代码示例</div>
    <div class='code'>
    <pre>
        &lt;style type='text/css'&gt;
             .test {
                color:red;
                border:1px blue solid;
            }
          &lt;/style&gt;
        &lt;div class='test'&gt;测试代码&lt;/div&gt;
        &lt;div class='test'&gt;测试代码&lt;/div&gt;
    </pre></div>
    <div class='title'>效果</div>
    <div class='result'>
    <div class='test'>测试代码</div>
    <div class='test'>测试代码</div>
    </div>
    </body>
</html>